import React, { Component, Fragment } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Tabs, Button, message, Modal, Upload, Icon } from 'antd';
import styles from './index.less';
import * as apis from '@/services/SystemMgr';
import PFetchNumber from './pages/PFetchNumber';
import router from 'umi/router';
// import SupplyPlanTime from './pages/SupplyPlanTime';
import FlowLayout from './pages/FlowLayout';
import AddFlow from './pages/FlowLayout/AddFlow';
import MonitoringStandard from './pages/MonitoringStandard';
import AuthorizedButton from '@/components/AuthorizedButton';

const { TabPane } = Tabs;

export default class SystemConfig extends Component {
  constructor() {
    super();
    this.state = {
      key: 'PFetchNumber',
      selectSerach: true,
      regionId: '',
      visible: false,
      e: null,
      file: '',
    };
  }

  // 控制显示隐藏高级筛选
  handleSelectSerachhBtn = () => {
    const { selectSerach } = this.state;
    this.setState({
      selectSerach: !selectSerach,
    });
  };

  onChangeKey = key => {
    this.setState({
      key,
    });
  };

  // 根据导航显示对应元素
  tabBlockElement = key => {
    let element = null;
    if (key === 'PFetchNumber') {
      element = (
        <Button style={{ margin: '5px 21px 0 5px' }} onClick={this.handleSelectSerachhBtn}>
          高级筛选
        </Button>
      );
    } else if (key === 'FlowLayout') {
      element = (
        <Fragment>
          <AuthorizedButton authority="systemConfig_addFlowPath">
            <AddFlow btnType="primary" value="添加流程" title="新增流程" update={this.update} />
          </AuthorizedButton>
          <AuthorizedButton authority="systemConfig_import">
            <Button onClick={this.handleImport}>导入</Button>
          </AuthorizedButton>
          <AuthorizedButton authority="systemConfig_export">
            <Button style={{ margin: '0 21px 0 5px' }} onClick={this.handleExport}>
              导出
            </Button>
          </AuthorizedButton>
        </Fragment>
      );
    }

    return element;
  };

  // 点击导出
  handleExport = () => {
    const { regionId } = this.state;
    if (regionId === '') {
      message.warning('导出的数据为空！');
    } else {
      window.location.href = `${process.env.apiUrl}/api/v1/sys/sysProcessConfig/export?regionId=${regionId}`;
    }
  };

  // 点击导入
  handleImport = () => {
    this.setState({
      visible: true,
    });
  };

  //
  handleFileOnChange = ({ fileList }) => {
    this.setState({
      file: fileList[0].originFileObj,
    });
  };

  beforeUploadHandle = file => {
    this.setState({
      file,
    });
    return false;
  };

  // 点击确定导入文件
  handleImprotOk = async () => {
    const { file } = this.state;
    const formData = new FormData();
    if (file !== '') {
      formData.set('file', this.state.file);
      const data = await apis.importSysProcessConfigUsingPOST({ data: formData });
      if (data.code === 1) {
        message.success(data.data);
        this.setState({
          visible: false,
        });
      } else {
        message.success(data.message);
      }
      this.update();
    } else {
      message.warning('没有选中的文件');
    }
  };

  // 关闭model层
  handleCancel = async () => {
    this.setState({
      visible: false,
    });
  };

  handleGetRegionId = regionId => {
    regionId.forEach(item => {
      this.setState({
        regionId: item,
      });
    });
  };

  // 调用子组件的方法
  updateFlow = e => {
    this.setState({
      e,
    });
  };

  // 刷新子组件
  update = () => {
    this.state.e.update();
  };

  render() {
    return (
      <div className={styles.SystemConfig}>
        <PageHeaderWrapper breadcrumb={null}>
          <Tabs
            activeKey={this.state.key}
            tabBarExtraContent={this.tabBlockElement(this.state.key)}
            onChange={this.onChangeKey}
          >
            <TabPane tab="取数系统" key="PFetchNumber">
              <PFetchNumber selectSerach={this.state.selectSerach} />
            </TabPane>
            {/* <TabPane tab="推送供货计划" key="2">
              <SupplyPlanTime />
            </TabPane> */}
            <TabPane tab="审批流程" key="FlowLayout">
              <Modal
                title="导入"
                visible={this.state.visible}
                onOk={this.handleImprotOk}
                onCancel={this.handleCancel}
              >
                <div>
                  导入模板：
                  <a href={`${process.env.apiUrl}/flow_template.xlsx`}>下载流程配置模板</a>
                </div>
                <div>
                  上传文件：
                  <Upload
                    onChange={this.handleFileOnChange}
                    beforeUpload={() => false}
                    action={file => {
                      this.setState({ file });
                    }}
                    // beforeUpload={this.beforeUploadHandle}
                  >
                    <Button>
                      <Icon type="upload" />
                      上传文件
                    </Button>
                  </Upload>
                </div>
              </Modal>
              <FlowLayout getRegionId={this.handleGetRegionId} updateFlow={this.updateFlow} />
            </TabPane>
            <TabPane tab="监控标准" key="MonitoringStandard">
              <MonitoringStandard />
            </TabPane>
          </Tabs>
        </PageHeaderWrapper>
      </div>
    );
  }
}
